<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布订阅者模式</title>
</head>
<body>
    <script>
        // // 事件触发器
        // class EventEmitter{
        //     constructor(){
        //         // {'click':[fn1,fn2], 'change':[fn]}
        //         this.subs = Object.create(null) // obj 对象没有原型，以键值对的存储对象

        //     }
        //     // 注册事件
        //     $on(eventType, handler){
        //         this.subs[eventType] = this.subs[eventType] || []
        //         this.subs[eventType].push(handler)
        //     }
        //     //订阅事件
        //     $emit(eventType){
        //         if(this.subs[eventType]){
        //             this.subs[eventType].forEach(handler => {
        //                 handler()
        //             });
        //         }
        //     }

        // }

        // // 测试

        // let em = new EventEmitter()
        // em.$on('click',()=>{
        //     console.log('click1')
        // })
        // em.$on('click',()=>{
        //     console.log('click2')
        // })
        // em.$emit('click')

        // 发布者 -- 目标
       
        class Dep {
            constructor(){
                this.subs = [] // 记录所有的订阅者 Watcher
            }
            // 把订阅者 Watcher 添加到 subs 里面
            addSub(sub){
                if(sub && sub.update){
                    this.subs.push(sub)
                }
            }
            // 发布通知
            notify(){
              this.subs.forEach(sub => {
                  sub.update()
              })  
            }
        }
        // 订阅者 -- 观察者

        class Watcher {
            update(){
                console.log('update');
                
            }
        }

        let dep = new Dep()
        let watcher = new Watcher()

        dep.addSub(watcher)
        dep.notify()
   </script>
</body>
</html>